<template>
	<view class="recruitIndex">
		<top-bar :home="false" :backState="2000" :transparentFixedFontColor="topTabFontColor" :type="topTabType" title="体验官招募活动"></top-bar>
		<view class="recruitIndexTopCont" :style="{ paddingTop: (statusBarHeight*2+88) + 'rpx' }">
			<view class="contBox">
				<image class="recruitIndexTit" src="https://lovebirdopen.com/static/img/recruitOfficer/recruitIndexTit.png" mode=""></image>
				<image @click="linkGo(1)" class="linkBtn linkBtn1" src="https://lovebirdopen.com/static/img/recruitOfficer/linkBtn1.png" mode=""></image>
				<image @click="linkGo(2)" class="linkBtn linkBtn2" src="https://lovebirdopen.com/static/img/recruitOfficer/linkBtn2.png" mode=""></image>
				<view class="getNotification">
					<view class="eachNotification">
						<view class="">好酒****称</view>
						<view class="">获得了500毫升九仙御贡</view>
					</view>
					<view class="eachNotification">
						<view class="">好酒****称</view>
						<view class="">获得了500毫升九仙御贡</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 招募管活动时间 -->
		<view class="recruitTimeBox">
			<view class="contBox">
				<view class="contTopBox">
					<image class="titImg" src="https://lovebirdopen.com/static/img/recruitOfficer/recruitTimeTit.png" mode=""></image>
					<view class="activityTime">活动时间：2021年2月28日—2021年3月3日</view>
				</view>
				<view class="contBottomBox">
					<image class="wineBottle" src="https://lovebirdopen.com/static/img/recruitOfficer/wineBottle.png" mode=""></image>
					<view class="tips">五谷天然发酵，经传统酿酒法</view>
					<view class="tips">采高山雪水，封藏于民间邛窖，原浆出坛</view>
					<view class="tips">让酒香四溢，入口清甜、细腻回绵</view>
				</view>
			</view>
		</view>
		<view class="inviteFriends">邀请好友助力</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 顶部导航样式
				topTabType:'transparentFixed',
				topTabFontColor:'#fff',
				// 导航栏高度
				statusBarHeight: 0,
			}
		},
		onLoad: function (option) {
			
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onPageScroll(e) {//滚动顶部导航的变化
			if(e.scrollTop>50){
				this.topTabType = 'fixed';
				this.topTabFontColor = '';
			}
			if(e.scrollTop < 50){
				this.topTabType = 'transparentFixed';
				this.topTabFontColor = '#fff';
			}

		},
		methods: {
			// 活动规则1&我的奖品2  跳转
			linkGo(index){
				
			},
		}
	}
</script>

<style lang="scss">
	.recruitIndex{
		min-height: 200%;
		background-color: #C42300;
	}
	.recruitIndexTopCont{
		position: relative;
		z-index: 1;
		background: linear-gradient(0deg, #FEEDCF 11.98%, #FF3E3E 100%);
		
		.contBox{
			position: relative;
			padding: 24rpx 0 770rpx;
			background: url('https://lovebirdopen.com/static/img/recruitOfficer/recruitIndexBj.png') no-repeat top center;
			background-size: 100% 100%;
		
			.recruitIndexTit{
				width: 100%;
				height: 266rpx;
			}
			
			.linkBtn{
				position: absolute;
				right: 0;
				width: 56rpx;
				height: 142rpx;
			}
			.linkBtn1{
				top: 40rpx;
			}
			.linkBtn2{
				top: 202rpx;
			}
			
			.getNotification{
				position: absolute;
				bottom: 211rpx;
				left: 32rpx;
				height: 184rpx;
				width: 600rpx;
				overflow: hidden;
				
				.eachNotification{
					width: 300rpx;
					height: 88rpx;
					padding-left: 20rpx;
					margin-bottom: 8rpx;
					font-size: 24rpx;
					line-height: 36rpx;
					color: #FFFFFF;
					background: rgba(255, 71, 46, 0.8);
					border: 2rpx solid #FFDC82;
					border-radius: 43px;
				}
			}
		}
	}
	
	.recruitTimeBox{
		position: relative;
		z-index: 2;
		margin-top: -205rpx;
		height: 408rpx;
		padding: 0 32rpx;
		background: url('https://lovebirdopen.com/static/img/recruitOfficer/recruitTimeBoxBj.png') no-repeat center 166rpx;
		background-size: 100% 172rpx;
		
		.contBox{
			position: relative;
			width: 100%;
			height: 100%;
			
			.contTopBox{
				position: relative;
				z-index: 2;
				
				.titImg{
					display: block;
					width: 604rpx;
					height: 102rpx;
					margin: 0 auto;
				}
				.activityTime{
					width: 604rpx;
					height: 52rpx;
					margin: 6rpx auto 0;
					font-weight: bold;
					font-size: 24rpx;
					line-height: 52rpx;
					text-align: center;
					color: #EE4231;
					background: #FFF3C7;
					border-radius: 0px 0px 12rpx 12rpx;
				}
			}
			
			.contBottomBox{
				position: relative;
				z-index: 1;
				height: 304rpx;
				width: 686rpx;
				margin: -64rpx auto 0;
				padding-top: 100rpx;
				padding-left: 24rpx;
				background: url('https://lovebirdopen.com/static/img/recruitOfficer/contBottomBoxBj.png') no-repeat;
				background-size: 100% 100%;
				
				.wineBottle{
					position: absolute;
					bottom: -16rpx;
					right: 0;
					width: 200rpx;
					height: 250rpx;
				}
				.tips{
					width: 504rpx;
					height: 54rpx;
					margin-bottom: 8rpx;
					font-size: 28rpx;
					line-height: 54rpx;
					color: #FFFFFF;
					text-align: center;
					background: url('https://lovebirdopen.com/static/img/recruitOfficer/line1.svg') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
	
	.inviteFriends{
		width: 590rpx;
		height: 96rpx;
		margin: 58rpx auto 0;
		font-weight: 900;
		font-size: 36rpx;
		line-height: 88rpx;
		color: #FFF2D8;
		text-align: center;
		background: linear-gradient(180deg, #F1743F 0%, #FF472E 100%);
		border-radius: 132px;
		border: 4rpx solid #FFE6A5;
	}
	
	
	
	
	
	
	
</style>
